<template>
  <div class="pigeonhole">
    <BreadCrumb>
      <template v-slot:first>首页</template>
      <template v-slot:second>归档</template>
      <template v-slot:third>归档</template>
    </BreadCrumb>
    <div class="main">
      <TimeLine :data="timeLine" v-if="timeLine.length !== 0" />
    </div>
  </div>
</template>

<script setup>
  import { ref, onBeforeMount } from 'vue'
  import { queryArticleTimelineRequest } from '@/network/api/pigeonhole'
  import BreadCrumb from '@/components/BreadCrumb.vue'
  import TimeLine from '@/components/TimeLine.vue'
  const timeLine = ref([])

  onBeforeMount(async () => {
    const result = await queryArticleTimelineRequest()
    timeLine.value = result.result
    console.log(timeLine.value)
  })
</script>

<style lang="less" scoped>
  .pigeonhole {
    width: 100%;
    .main {
      width: 100%;
      padding: 42px 24px;
      background: var(--background-secondary);
      border-radius: 16px;
    }
  }
</style>
